<div id="mapa-page" class="container mapa-container">
    <div class="row">
        <section id="mapa-container" class="span12 box-container">
            <header id="search-bar" class="box-header">
                <span class="border-width bg-color-01"></span>
                <form id="mapa-search-form" class="form-search">
                    <div class="input-append">
                        <input id="mapa-search-input" class="input-medium" size="16" type="text" placeholder="&iquest;D&oacute;nde est&aacute;s?"><button type="submit" class="btn btn-green"><span class="icons icon-search-white"></span></button>
                    </div>
                </form>
                <a class="btn scroll-to" id="btn-info" href="#informacion-container">Informaci&oacute;n</a>
                <a class="btn" id="btn-expand-mapa" href="#expand-mapa"><span class="icon icon-expand"></span></a>
            </header>
            <div class="row-fluid">
                <!--<nav id="category-list-container" class="category-list-container span2 border-left">
                    <span class="border-width bg-color-07"></span>
                    <ul id="category-list" class="category-list box-list first-level">
                    </ul>
                </nav>-->
                <article id="mapa-content" class="box-container span12">
                    <div id="mapa-box" class="span12">
                    </div>
                </article>
            </div>
        </section>
        <section id="marker-details-container" class="span12 box-container">
            <header class="box-header" style="display: none">
                <span class="border-width bg-color-16"></span>
                <h2>detalles del punto de reciclado<span class="wait" style="margin: 2px 0 0 13px; display: inline"></span></h2>
        <!--                <a class="aside btn-mobile btn-collapse" href="#"><span class="icons-collapse icon-collapse-down"></span></a>-->
            </header>

            <article class="row-fluid" style="display: none">
                
            </article>
        </section>
        <section id="informacion-container" class="span12 box-container hidden-phone">
            <header class="box-header">
                <span class="border-width bg-color-17"></span>
                <h2>Informacion</h2>
        <!--                <a class="aside btn-mobile btn-collapse" href="#"><span class="icons-collapse icon-collapse-down"></span></a>-->
            </header>

            <article class="row-fluid">
                <div class="span12 box-container">
                    <nav id="info-category-list-container" class="category-list-container span2 border-left">
                        <span class="border-width bg-color-07"></span>
                        <ul id="info-category-list" class="category-list box-list first-level">

                        </ul>
                    </nav>
                    <div id="info-category-details-container" class="span10 box-container">
                    </div>
                </div>
            </article>
        </section>
    </div>
</div>
<textarea id="infoboxContent" style="display: none">
    <img src="<?php echo base_url(); ?>resources/img/arrows/generic.png" />
    <div class="content">
        <p><strong>${markerNombre}</strong><br />
        ${markerDireccion}<br />
        ${categoriasToString}</p>
    </div>
</textarea>
<textarea id="categoryListTpl" style="display: none">
    <li class="list-item ${categoriaIdentificador}-item">
    <span class="border-width bg-color-${categoriaIdentificador}"></span>
        <a class="link" href="${baseUrl}${categoriaIdentificador}"
            onclick="${jsOnclick}"
            title="Puntos de reciclado de ${categoriaNombre}"
            id="categoria${categoriaId}"><span class="text">${categoriaNombre}</span></a>
    </li>
</textarea>
<textarea id="infoCategoryListTpl" style="display: none">
    <li data-category-id="${categoriaId}" class="list-item ${categoriaIdentificador}-item">
    <span class="border-width bg-color"></span>
    <a class="link" href="#${categoriaIdentificador}"><span class="text">${categoriaNombre}</span><span class="arrow"></span></a>
    </li>
</textarea>
<div id="sliderBox" style="display: none"><!-- sliderbox -->
    <div id="category-list-container" class="category-list-container border-left overflow">
    <span class="border-width bg-color-07"></span>
    <div class="content">
        <ul id="category-list" class="category-list box-list first-level">
        </ul>
    </div>
<input id="btn-expand-markers-list" type="button"></div>
</div>
<!-- detalles del punto de reciclado -->
<div id="detallesMarkerTpl" style="display: none">
    <div class="span12 box-container">
        <div id="marker-menu-container" class="span2 hidden-phone">
            <nav id="marker-menu" class="border-left">
                <span class="border-width bg-color-07"></span>
                <ul id="actions-items" class="span box-list">
                    <li class="span box-item box-padding">
                        <a class="link" href="javascript:void(0);" id="favorito">
                            <span class="border-width bg-color-07"></span>
                            <span class="icons icons-panel icon-add-favorite"></span>
                            <span class="text" id="isFavorito">${isFavorito}</span>
                        </a>
                    </li>
                    <li class="span box-item box-padding borders">
                        <a class="link" href="javascript:void(0);"  id="denunciar">
                            <span class="border-width bg-color-07"></span>
                            <span class="icons icons-panel icon-denuncia"></span>
                            <span class="text">denunciar</span>
                        </a>
                    </li>
                    <li class="span box-item box-padding">
                        <!--<span>
                            <span class="icons icons-panel icon-share"></span>
                            <span class="text">compartilo</span>
                        </span>-->
                    </li>
                    <li class="span box-item box-padding social-item">
                        <div class="fb-like" data-href="<?php echo(base_url()); ?>mapa/recicladora/${markerNombreUrl}/${markerCategoriaUrl}/${markerId}" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
                    </li>
                    <li class="span box-item box-padding social-item" id="twbtn">
                        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                    </li>
                </ul>
                    
                <ul id="info-items" class="span box-list">
                    <li id="visitas-item" class="span box-item box-padding">
                        <span class="icons icons-panel icon-visits"></span>
                        <b class="text">visitas:</b>
                        <span class="val">${markerVisitas}</span>
                    </li>
                    <li id="favoritos-item" class="span box-item box-padding">
                        <span class="icons icons-panel icon-favorite-16x"></span>
                        <b class="text">favoritos:</b>
                        <span class="val">${markerFavoritos}</span>
                    </li>
                    <li id="tips-item" class="span box-item box-padding">
                        <span class="icons icons-panel icon-comments"></span>
                        <b class="text">tips:</b>
                        <span class="val">${markerTips}</span>
                    </li>
                </ul>
            </nav>
        </div>
        <div id="marker-details-content" class="span10">
            <div id="datos-row" class="span">
                <a href="#" class="back-to-map icons-collapse icon-collapse-up"></a>
                <h3 class="title">${markerNombre} <em class="" id="marker-tipo">${markerTipo}</em></h3>
                <ul class="span12 info-list box-list">
                    <li id="address-item" class="box-item span6">
                        <b class="title-item">Direcci&oacute;n:&nbsp;</b><span class="val">${markerDireccion}</span>
                    </li>
                    <li id="hour-item" class="box-item span6">
                        <b class="title-item">Horario:&nbsp;</b><span class="val">${markerHorario}</span>
                    </li>
                    <li id="phone-item" class="box-item span6">
                        <b class="title-item">Telefono:&nbsp;</b><span class="val">${markerTelefono}</span>
                    </li>
                    <li id="recive-item" class="box-item span12">
                        <b class="title-item">Reciben:&nbsp;</b>
                        <span class="val">
                            ${reciben}
                        </span>
                    </li>
                    <li id="description-item" class="box-item span12">
                        <b class="title-item">Descripcion:</b>
                        <p class="description">
                            ${markerDescripcion} 
                        </p>
                    </li>
                </ul>
            </div>
            <div id="fotos-row" class="span">
                <a href="#" class="back-to-map icons-collapse icon-collapse-up"></a>
                <h3 class="title">Fotos</h3>
                ${images}
                <div><span class="wait" style="display: inline-block;"></span></div>
                <p class="clearfix">&nbsp;</p>
                <div id="fileuploader"></div>
                <a href="javascript:void(0);" class="btn hide" id="cargarFotos">Cargar fotos</a>
                <!--<a id="btn-subir-foto" href="#subir-foto">
                    <span class="icons icons-panel icon-add-image"></span>
                    <span class="text">Subi tu foto</span>
                </a>-->
            </div>
            <div id="tips-row" class="span">
                <a href="#" class="back-to-map icons-collapse icon-collapse-up"></a>
                <h3 class="title">Tips</h3>
                <ul id="tips-list" class="box-list span">
                    ${tips}
                </ul>
                <form id="tips-form" class="span">
                    <div class="left">
                        <span class="avatar">
                            <img src="<?php echo(($avatarFb)?$avatarFb:$avatar); ?>?width=54&height=54" id="imagenUsuario" alt="<?php echo($usuario->nombre.' '.$usuario->apellido); ?>" title="<?php echo($usuario->nombre.' '.$usuario->apellido); ?>"/>
                        </span>
                    </div>
                    <div class="right">
                        <label class="user-name">
                            <span class="icon icon-add-comment"></span>
                            <span class="text"><b class="val"><?php echo($usuario->nombre); ?></b>, dej&aacute; un consejo sobre este punto...</span>
                        </label>
                        <textarea class="input-xlarge" id="comment-field"></textarea>
                        <a href="javascript:void(0);" class="btn" id="btn-send-comment">Enviar</a>
                    </div>
                </form>
                
            </div>
        </div>
        <div id="marker-bottom-menu-container" class="span2 visible-phone">
            <nav id="marker-bottom-menu" class="border-left">
                <ul id="actions-bottom-items" class="span box-list">
                    <li class="span box-item box-padding">
                        <a class="link" href="javascript:void(0);" id="favorito">
                            <span class="border-width bg-color-07"></span>
                            <span class="icons icons-panel icon-add-favorite"></span>
                            <span class="text">${isFavorito}</span>
                        </a>
                    </li>
                    <li class="span box-item box-padding borders">
                        <a class="link" href="javascript:void(0);" id="denunciar">
                            <span class="border-width bg-color-07"></span>
                            <span class="icons icons-panel icon-denuncia"></span>
                            <span class="text">denunciar</span>
                        </a>
                    </li>
                    <li class="span box-item box-padding">
                        <!--<span class="border-width bg-color-07"></span>
                        <span>
                            <span class="icons icons-panel icon-share"></span>
                            <span class="text">compartilo</span>
                        </span>-->
                    </li>
                    <li class="span box-item box-padding social-item">
                        <span class="border-width bg-color-07"></span>
                        <img src="./resources/img/btns/preview-facebook-count.png" alt="" title=""/>
                    </li>
                    <li class="span box-item box-padding social-item">
                        <span class="border-width bg-color-07"></span>
                        <img src="./resources/img/btns/preview-twtter-count.png" alt="" title=""/>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<div id="tipTpl" style="display: none">
    <li class="box-item span">
        <div class="left">
            <span class="avatar"><img src="<?php echo(($avatarFb)?$avatarFb:$avatar); ?>?width=54&height=54"  alt="<?php echo($usuario->nombre.' '.$usuario->apellido); ?>" title="<?php echo($usuario->nombre.' '.$usuario->apellido); ?>"/></span>
        </div>
        <div class="right">
            <div class="user-name"><b class="name">${owner}</b> dice,</div>
            <p class="comment">${comentario}</p>
        </div>
    </li>
</div>
<div id="noTipsTpl" style="display: none">
    <p>En este punto todav&iacute;a nadie carg&oacute; ning&uacute;n tip.</p>
    <p>Pod&eacute;s ser el primero en hacerlo.</p>
</div>
<div id="noImagesTpl" style="display: none">
    <span id="noImages">En este punto todav&iacute;a nadie carg&oacute; ninguna imagen. Pod&eacute;s ser el primero en hacerlo.</span>
</div>
<div id="denunciarModal" class="modal hide fade">
    <div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	<h3><span class="icons icons-panel icon-denuncia-active"></span>Denunci&aacute; este punto</h3>
    </div>
    <div class="modal-body" id="denunciarBody">
        <div id="denunciarFomrContainer">
            <p>Si detect&aacute;s actividades irregulares en este punto de reciclaje, lo encontr&aacute;s fuera de funcionamiento o tuviste una mala experiencia, envianos tu denuncia.</p>
            <p>
                <strong id="denunciarMarkerNombre"></strong><br />
                <span id="denunciarMarkerDireccion"></span>
            </p>
            <form action="<?php echo base_url(); ?>controllers/denunciar/" method="post" id="denunciarForm">
                <!--<label>Motivos de la denuncia</label>
                <select name="motivo">
                    <option value="1">uno</option>
                    <option value="2">dos</option>
                    <option value="3">tres</option>
                </select>-->
                <label for="comentario" class="field-container"
                       <b class="title span">Comentario <em>(Contanos brevemente que inconveniente tuviste)</em></b>
                </label>    
                <textarea type="text" value="" name="comentario" id="comentario" class="field"></textarea>
                <p><a href="javascript:void(0);" class="btn btn-green" id="denunciarSubmit"><span class="text">Denunciar</span></a></p>
            </form>
        </div>
        <div id="denunciarLoader" class="progress progress-success progress-striped active hide">
            <div class="bar" style="width: 100%"></div>
        </div>
    </div>
</div>
<input type="hidden" name="markerId" id="markerId" value="" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/jquery/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/jquery/components/infobox/infobox.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/js/fileuploader.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/js/chico-min-0.11.1.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/js/buscadorMapa.js"></script>